{{ range .Site.Menus.palette }}
{{ if .HasChildren }}
<button class="btn btn-link nav-link d-flex align-items-center" type="button" title="{{ .Params.toggle_text }}" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside" data-bs-display="static" data-bs-palette="switcher">
    <svg class="bi my-1 palette-icon-active" width="16" height="16"><title>{{ .Params.toggle_text }}</title><use href="#bi-palette"></use></svg>
    <span class="d-lg-none ms-2" id="paletteSwitcher-text">{{- .Name | safeHTML -}}</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="paletteSwitcher-text">
    {{ range .Children }}
    <li>
        <button class="dropdown-item d-flex align-items-center {{ .Params.class }}" type="button" title="{{ .Name | safeHTML }}" data-bs-palette-value="{{ .Params.palette_value }}">
            <svg class="bi me-2" width="16" height="16"><title>{{ .Name | safeHTML }}</title><use href="#{{ .Params.svg.useHref }}"></use></svg>
            <span>{{ .Name | safeHTML }}</span>
            <svg class="bi ms-auto d-none" width="16" height="16"><use href="#bi-check2"></use></svg>
        </button>
    </li>
    {{ end }}
</ul>
{{ else }}
<span>{{- .Name | safeHTML -}}</span>
{{ end }}
{{ end }}